<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>提瓦特登记小程序</title>
  <style>
    body {
      font-family: 'Microsoft YaHei', Arial, sans-serif;
      line-height: 1.6;
      margin: 0;
      padding: 20px;
      background-color: #f5f5f5;
      color: #333;
    }

    .container {
      max-width: 800px;
      margin: 0 auto;
      background-color: white;
      padding: 30px;
      border-radius: 10px;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    }

    h1 {
      color: #2c3e50;
      text-align: center;
      border-bottom: 2px solid #3498db;
      padding-bottom: 10px;
    }

    h2 {
      color: #3498db;
      margin-top: 25px;
    }

    h3 {
      color: #2c3e50;
      margin-top: 20px;
      font-size: 1.2em;
    }

    .section {
      margin-bottom: 25px;
      padding: 15px;
      background-color: #f9f9f9;
      border-radius: 5px;
    }

    .principles {
      background-color: #e8f4fc;
      border-left: 4px solid #3498db;
    }

    .principle-item {
      margin-bottom: 15px;
      padding: 10px;
      background-color: white;
      border-radius: 5px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }

    ul {
      padding-left: 20px;
    }

    li {
      margin-bottom: 8px;
    }

    .contact-form {
      margin-top: 20px;
    }

    .form-group {
      margin-bottom: 20px;
    }

    label {
      display: block;
      margin-bottom: 8px;
      font-weight: bold;
      color: #2c3e50;
    }

    input, textarea {
      width: 100%;
      padding: 12px;
      border: 2px solid #ddd;
      border-radius: 4px;
      box-sizing: border-box;
      font-size: 16px;
      transition: border-color 0.3s;
    }

    input:focus, textarea:focus {
      border-color: #3498db;
      outline: none;
    }

    button {
      background-color: #3498db;
      color: white;
      border: none;
      padding: 12px 30px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
      width: 100%;
      transition: background-color 0.3s;
    }

    button:hover {
      background-color: #2980b9;
    }

    button:disabled {
      background-color: #95a5a6;
      cursor: not-allowed;
    }

    footer {
      text-align: center;
      margin-top: 30px;
      color: #7f8c8d;
      font-size: 14px;
    }

    .message {
      padding: 15px;
      margin: 15px 0;
      border-radius: 4px;
      text-align: center;
      display: none;
    }

    .success {
      background-color: #d4edda;
      color: #155724;
      border: 1px solid #c3e6cb;
    }

    .error {
      background-color: #f8d7da;
      color: #721c24;
      border: 1px solid #f5c6cb;
    }

    .loading {
      display: inline-block;
      width: 20px;
      height: 20px;
      border: 3px solid rgba(255,255,255,.3);
      border-radius: 50%;
      border-top-color: #fff;
      animation: spin 1s ease-in-out infinite;
      margin-right: 10px;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    .form-instruction {
      background-color: #e8f4fc;
      padding: 15px;
      border-radius: 5px;
      margin-bottom: 20px;
      border-left: 4px solid #3498db;
    }
  </style>
</head>
<body>
<div class="container">
  <h1>欢迎来到提瓦特登记小程序</h1>

  <div class="section">
    <h2>我是谁</h2>
    <p><strong>你猜猜我是谁呢？</strong>放心这个页面没有病毒。</p>
    <p>你好聪明，所以请填一下下面的表格。</p>
  </div>

  <div class="section principles">
    <h2>联系请求的核心原则</h2>

    <div class="principle-item">
      <h3>一、明确对象和意图</h3>
      <p>在请求联系方式前，先明确：</p>
      <ul>
        <li>你是谁？简要介绍自己</li>
        <li>为什么想要对方的联系方式？</li>
        <li>你的请求是否合理且有价值？</li>
      </ul>
    </div>

    <div class="principle-item">
      <h3>二、表达欣赏和尊重</h3>
      <p>先真诚地夸赞对方，说明理由：</p>
      <ul>
        <li>具体指出你欣赏对方的哪些方面</li>
        <li>说明为什么想与对方建立联系</li>
        <li>让对方感到被重视和理解</li>
      </ul>
    </div>

    <div class="principle-item">
      <h3>三、给予选择权</h3>
      <p>使用尊重对方决定的措辞：</p>
      <ul>
        <li>"是否方便分享联系方式"</li>
        <li>"如果可以的话"</li>
        <li>"完全尊重您的决定"</li>
        <li>让对方感觉舒适，没有压力</li>
      </ul>
    </div>

    <div class="principle-item">
      <h3>四、保持简洁</h3>
      <p>话术要精炼有力：</p>
      <ul>
        <li>避免长篇大论，突出重点</li>
        <li>清晰表达你的请求和理由</li>
        <li>确保在短时间内能读完并理解</li>
      </ul>
    </div>
  </div>

  <div class="section">
    <h2>请填写信息</h2>
    <p>这个只是记录不会泄露，请放心填写：</p>

    <div class="form-instruction">
      <strong>📧 提交说明：</strong>填写后点击提交，我们会安全保存您的信息
    </div>

    <div id="message" class="message"></div>

    <div class="contact-form">
      <form action="https://getform.io/f/bdrdmwjb" method="POST" id="qqForm">
        <input type="hidden" name="_subject" value="新的QQ号码提交 - 提瓦特登记">

        <div class="form-group">
          <label for="qq">QQ号码：</label>
          <input type="text" id="qq" name="qq" placeholder="请输入您的QQ号码" required>
        </div>

        <div class="form-group">
          <label for="name">昵称：</label>
          <input type="text" id="name" name="name" placeholder="怎么称呼您？">
        </div>

        <div class="form-group">
          <label for="user_message">留言：</label>
          <textarea id="user_message" name="message" rows="3" placeholder="有什么想说的吗？"></textarea>
        </div>

        <input type="hidden" name="_gotcha" style="display:none">

        <button type="submit" id="submitBtn">
          <span id="btnText">提交信息</span>
          <span id="btnLoading" class="loading" style="display:none;"></span>
        </button>
      </form>
    </div>
  </div>

  <footer>
    <p>© 2025 提瓦特登记小程序 - 您的信息将被严格保密</p>
  </footer>
</div>

<script>
  document.getElementById('qqForm').addEventListener('submit', function(e) {
    const submitBtn = document.getElementById('submitBtn');
    const btnText = document.getElementById('btnText');
    const btnLoading = document.getElementById('btnLoading');
    const messageDiv = document.getElementById('message');

    submitBtn.disabled = true;
    btnText.textContent = '提交中...';
    btnLoading.style.display = 'inline-block';
    messageDiv.style.display = 'none';

    setTimeout(() => {
      messageDiv.textContent = '提交成功！感谢您的参与。';
      messageDiv.className = 'message success';
      messageDiv.style.display = 'block';
    }, 5000);
  });
</script>
</body>
</html>
